Игра на HTML5

Vlad · June 24, 2011

Сделал свою первую игру на Canvas API. Для начала выбрал идею попроще, логическая игра на одного человека.

В процессе игры придумал разные улучшения --- явно не хватает отмены последнего хода, дизайн можно "прикрутить" или вообще концепцию игры поменять. Сделать упор на социальную составляющую. Убрать ограничение в 22 хода и сохранять результаты игроков, у кого меньше, тот и молодец. Но это пока фантазии.

Интересует оптимизация кода, что можно улучшить в скрипте?

ctpz · June 24, 2011

Прикольная игрушка.

Shift-Web · June 26, 2011

Забавно

psywalker · June 29, 2011

Vlad, Всё отлично работает, я не заметил изъянов или багов. Только вот как в неё играть, так и не понял :blush:

Трудно такую игрушку было сделать?

mishka · June 29, 2011

Только вот как в неё играть, так и не понял

Трудное детство без головоломок?

psywalker · June 29, 2011

Только вот как в неё играть, так и не понял
Трудное детство без головоломок?

Да нет, головоломки как раз всегда были у меня повсюду, и в игры разные любил играть, разгадывать и т.д, по тем же шахматам даже разряд есть, но вот эта игра, которую Влад смастерил, почему то прошла мимо меня, т.е. вообще ни разу в неё не играл за всю жизнь, ни я, не мои знакомые. :unsure:

Vlad · June 30, 2011

У меня книжка есть набитая настольными логическими играми, большинство из которых прошли мимо. Объясняется легко, эти игры популярны в Африке, Южной Америке и других континентах. Тем интереснее их делать и популяризировать.

Делать было в основном легко, пара дней всего ушла, иногда только упирался в незнания особенностей JS. К примеру, почему-то решил, что один массив можно присвоить другому, но пришлось делать цикл. Так и не разобрался, как в Canvas менять порядок элементов, чтобы один был поверх другого. Защиту от дурака долго отлаживал, чтобы фишки можно было выбирать только те, у которых есть ход и ходили они правильно. По началу фишки по диагонали прыгали и ходили на две клетки независимо от того, есть перед ними другая фишка или нет.

ctpz · June 30, 2011

Я вот думаю. Не сделать ли мне какую-нибудь игру. Те же крестики-нолики. Или может все-таки что-то логическое?

psywalker · June 30, 2011

Vlad, Понял Влад, ну всё равно молодец!

Так и не разобрался, как в Canvas менять порядок элементов

А вот по моему никак. Только если заново перерисовывать. Ты же рисуешь на холсте как бы, а рисунок нельзя просто так взять и перенести. Поэтому только стирать и заново рисовать. Стирать либо место за ним, либо весь кэнвас сразу.

Я вот думаю. Не сделать ли мне какую-нибудь игру. Те же крестики-нолики. Или может все-таки что-то логическое?

Да ты уже, я заметил много чего "Сделал", только языком правда

ctpz · June 30, 2011

Да ты уже, я заметил много чего "Сделал", только языком правда

А что ты на это скажешь?

Edited June 30, 2011 by ctpz

Akaciya · July 4, 2011

В условиях не сказано, можно ли перепрыгивать через пустое место. (на деле - нельзя перепрыгнуть через кружочек на свободное место, кружочек при этом не занятый)скрин

Vlad · July 4, 2011

В условиях написано, что фишка может перепрыгивать через другую фишку, если за ней поле свободно. На два пустых поля перепрыгивать нельзя.

Nailex7 · July 5, 2011

Неплохо

Vlad · July 7, 2011

Кажется я неверно воспринял условия задачи, поэтому выиграть невозможно. Ведь ходом можно считать переход одной фишки сразу через несколько других. У меня же сейчас любое движение считается одним ходом.

gibigate · July 7, 2011

Тоже раньше не играл в подобные игрушки.

Пишу игру на jquery, пока что есть человек который бегает по уровню и статичные враги, занимаюсь когда свободен.

Канвас и тонкости анимаций css3 еще не освоил, поэтому приходится на jquery

Edited July 7, 2011 by gibigate

Vlad · July 10, 2011

Переделываю игру под новый дизайн и другую концепцию. Возник вопрос, можно ли канвас уменьшить и передать в другой канвас в виде картинки? Мне нужно, чтобы рядом выводилась уменьшенная копия моего рисунка.

psywalker · July 10, 2011

Переделываю игру под новый дизайн и другую концепцию. Возник вопрос, можно ли канвас уменьшить и передать в другой канвас в виде картинки? Мне нужно, чтобы рядом выводилась уменьшенная копия моего рисунка.

Хороший вопрос. Я думаю вот этот код натолкнёт тебя на мысль

<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


	<meta charset="utf-8">
	<title>Canvas Primer - Example: ImageData colour inversion filter</title>

  </head><body>

	<p><canvas id="myCanvas" width="350" height="350"></canvas></p>  
	<canvas id="test"></canvas>
<script type="text/javascript">

	var test = document.getElementById('test');
	testCtx = test.getContext('2d');
	testCtx.fillStyle = 'red';
	testCtx.fillRect(0, 0, 100, 100);
	testCtx.fill();<!--
window.addEventListener('load', function () {

  var elem = document.getElementById('myCanvas');
  if (!elem || !elem.getContext) {
    return;
  }


  var context = elem.getContext('2d');

var x = 0, y = 0;


context.drawImage(test, x, y);



}, false);
</script>
  </body></html>

psywalker · July 10, 2011

Вот такой вот ещё вариант, получше

<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


	<meta charset="utf-8">
	<title>Canvas Primer - Example: ImageData colour inversion filter</title>

  </head><body>

	<p><canvas id="myCanvas" width="350" height="350"></canvas></p>  
	<canvas id="test"></canvas>
<script type="text/javascript">

	var test = document.getElementById('test');
	testCtx = test.getContext('2d');
	testCtx.fillStyle = 'red';
	testCtx.fillRect(0, 0, 100, 100);
	testCtx.fill();<!--
window.addEventListener('load', function () {

  var elem = document.getElementById('myCanvas');
  if (!elem || !elem.getContext) {
    return;
  }


  var context = elem.getContext('2d');
  if (!context || !context.getImageData || !context.putImageData || !context.drawImage) {
    return;
  }

var x = 0, y = 0;

var imgd = testCtx.getImageData(x, y, 300, 300);
context.putImageData(imgd, x, y);/**/
}, false);
</script>
  </body></html>

Vlad · July 11, 2011

Понял, спасибо.

psywalker · July 11, 2011

Понял, спасибо.

Обращайся!

Sign In

Игра на HTML5

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information